<template>
  <div class="page">
    <div class="table-box">
      <div class="table-title">
        <h1>机构用户基本信息</h1>
      </div>
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>姓名</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <!-- <span>{{ patientUser.name }}</span> -->
            <!-- <span>{{ patientUser.name }}</span> -->
            <!-- <input type="text" :value="patientUser.name" class="my-input" v-model="patientUser.name"> -->
            <el-input :value="instituteUser.name" v-model="instituteUser.name" placeholder="填写名字"></el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span>身份证</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ instituteUser.id_card }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span>性别</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ instituteUser.sex }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>民族</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ instituteUser.nation }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span>出生日期</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ instituteUser.birth }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span>家庭地址</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ instituteUser.address }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row style="border-bottom: 1px solid #f2f2f4;">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>联系电话</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ instituteUser.tel }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span>邮箱</span>
          </div>
        </el-col>
        <el-col :span="12" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ instituteUser.email }}</span>
          </div>
        </el-col>
      </el-row>
    </el-row>
      <el-row style="border-bottom: 1px solid #f2f2f4;">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <span>部门名</span>
          </div>
        </el-col>
        <el-col :span="4" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ instituteUser.dept_name }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <span>机构名</span>
          </div>
        </el-col>
        <el-col :span="12" class="column">
          <div class="grid-content bg-purple-light">
            <span>{{ instituteUser.institution_name }}</span>
          </div>
        </el-col>
      </el-row>

    </div>
    
    <!-- <div class="confirm-btn">
      <el-button type="primary" @click="changeInfoForm()">
        修改信息
      </el-button>
    </div> -->
    <el-dialog
        title="修改信息"
        :visible.sync="dialogVisibleChange"
        width="30%"
        :before-close="handleCloseChange"
      >
        <el-form
          label-position="left"
          label-width="100px"
          :model="infoForm"
        >
          <el-form-item label="电话号码">
            <el-input v-model="infoForm.tel"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="infoForm.address"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="infoForm.email"></el-input>
          </el-form-item>
         
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleChange = false">取 消</el-button>
          <el-button type="primary" @click="updateinfo()">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>
<script>
import { organization } from '@/api'
export default {
  name: 'InstituteInfo',
  data() {
    return {
      dialogTip : false,
      dialogVisibleChange: false, 
      instituteUser: {
        name: null,
        id_card: null,
        sex: null,
        nation: null,
        address: null,
        tel: null,
        institution_name : null,
        dept_name : null,
        email : null

      },
      infoForm : {
        id_card: null,
        address: null,
        email: null,
        tel: null,
      }
    }
  },

  created() {
    this.initData()
  },

  methods: {
    updateinfo() {
      patient.updatePatientInfo(this.infoForm).then(res => {
          console.log(res)
          this.handleCloseChange()
      })
    },
    handleCloseChange() {
      this.dialogVisibleChange = false;
    },
    
    changeInfoForm() {
      this.infoForm = this.patientUser;
      this.dialogVisibleChange = true;
      this.changeType = true;
    },
    
    initData() {
      organization.getuserInfo().then(res => {
        console.log("机构用户个人信息")
        console.log(res)
        this.instituteUser = res.data.data
      })
    },
    clearInfoForm() {
      this.infoForm = {
        id_card: null,
        address: null,
        email: null,
        tel: null,
      }
    },
    confirmEdit() {

    },
  }
}
</script>

<style lang="less">
.page {
  .table-box {

    .table-title {
      padding: 12px 0px;
    }

    .separate {
      width: 100%;
      height: 86px;
    }

    .el-row {
      .el-input {
        // position: none;
        font-size: 16px;
        color: #000;
        .el-input__inner {
          background-color: transparent;
          border: none;
          text-align: center;
          color: #000;
        }
      }
      // padding: 12px 0px;
      border-top: 1px solid #f2f2f4;
      // border-bottom: 1px solid #f2f2f4;
      border-left: 1px solid #f2f2f4;

      // height:48px;
      .el-col {
        // border-right: 2px solid #f2f2f4;
        text-align: center;
        position: relative;
        height: 64px;
        line-height: 64px;
        box-sizing: border-box;

        .left {
          text-align: left;
          // padding-left: 12px;
          padding-left: 12px;
          padding-right: 12px;
          box-sizing: border-box;
        }
      }

      .column {
        background-color: #f5f6fa;
      }

      .el-col::after {
        content: '';
        position: absolute;
        width: 1px;
        height: 100%;
        // padding: 12px 0px;
        background-color: #f2f2f4;
        right: 0px;
        top: 0px;
      }
    }

  }
  .confirm-btn {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>